<div class="divTree">
	<div class="treeTop">
		<div class="treeTitle">
			<i class="fa fa-car"></i> 车辆列表
			<button class="dragBtn btn btn-primary" id='dragBtn' (mousedown)='draggingEvent()' title="拖拽改变盒子大小"> ↔ </button>
		</div>
		<div class="treeHead">
			<button class="btn btn-primary btn-sm eventBtn" (click)='openMyTree()'>{{treeStatus}}</button>
			<button class="btn btn-success btn-sm eventBtn onLineCar" (click)='onlineCar()'>在线</button>
			<div class="seachContent">
				<div class="input-group treeInpBtn">

					<input type="text" id="testSeach" class="form-control seachInp" name="seachInp" placeholder="请输入关键字...">
					<div class="prevnextWarp">
						<span class="font12">{{findString}}</span>
						<button (click)="positionPrev()" title="上一个"><img class="iconImg" src="assets/img/trackImage/jiantou1.png"  /></button>
						<button (click)="positionNext()" title="下一个"><img class="iconImg" src="assets/img/trackImage/jiantou2.png"  /></button>
						<button (click)="clearSearchval()" title="清空"><img class="iconImg" src="assets/img/trackImage/closeHei.png"  style="width: 10px;"/></button>
						<!--<i class="glyphicon fa  fa-angle-up"  title="上一个" (click)="positionPrev()"></i>
						<i class="glyphicon fa  fa-angle-down" title="下一个" (click)="positionNext()"></i>-->
					</div>
					<div class="input-group-btn">
						<button class="btn btn-primary btn-sm seachBtn" (click)='treeQueryEvent()'>
							<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
						</button>
					</div>
				</div>

			</div>
		</div>
	</div>

	<div class="treeBody">
		<div class="notOnlineCar" *ngIf='notOnlineCar'>没有在线车辆</div>
		<div *ngFor="let item of carTreeData;let i=index;" class="companyItem">
			<div *ngIf='item.isShow'>
				<div (click)="openCarlist(item)" class="companName">
					<!--一级公司名-->
					<i class="fa fa-home"></i>
					<span class="getSeach">{{item.text}}</span>
					<span class="countCar">
						[ <span class="countAll">{{item.totalCount}}</span> /
						<span class="countOnline">{{item.onLineCount}}</span> /
						<span class="countOffline">{{item.offLineCount}}</span> ]
					</span>
					<i class="glyphicon" [ngClass]="{'fa  fa-angle-up':item.state.opened}"></i><i class="glyphicon" [ngClass]="{'fa  fa-angle-down':!item.state.opened}"></i>
				</div>
				<div *ngIf="item.state.opened">
					<div *ngIf="item.childCompanyJSTreeList.length>0" class="lv2Company">
						<div *ngFor="let xinxi of item.childCompanyJSTreeList">
							<!--二级公司名-->
							<div *ngIf='xinxi.isShow'>
								<div (click)="openCarlist(xinxi)" class="companyItem companName">
									<div class="dottedBox"></div>
									<i class="fa fa-home"></i>
									<span class="getSeach">{{xinxi.text}}</span>
									<span class="countCar">[
										<span class="countAll">{{xinxi.totalCount}}</span> /
										<span class="countOnline">{{xinxi.onLineCount}}</span> /
										<span class="countOffline">{{xinxi.offLineCount}}</span> 
									]</span>
									<i class="glyphicon" [ngClass]="{'fa  fa-angle-up':xinxi.state.opened}"></i><i class="glyphicon" [ngClass]="{'fa  fa-angle-down':!xinxi.state.opened}"></i>
								</div>
								<div *ngIf="xinxi.state.opened">
									<!--3级公司信息-->
									<div *ngFor="let tree3 of xinxi.childCompanyJSTreeList">
										<div *ngIf='tree3.isShow' style="padding-left: 15px;">
											<div (click)="openCarlist(tree3)" class="companyItem companName">
												<div class="dottedBox"></div>
												<i class="fa fa-home"></i>
												<span class="getSeach">{{tree3.text}}</span>
												<span class="countCar">
													[
													<span class="countAll">{{tree3.totalCount}}</span> /
												<span class="countOnline">{{tree3.onLineCount}}</span> /
												<span class="countOffline">{{tree3.offLineCount}}</span> ]
												</span>
												<i class="glyphicon" [ngClass]="{'fa  fa-angle-up':tree3.state.opened}"></i><i class="glyphicon" [ngClass]="{'fa  fa-angle-down':!tree3.state.opened}"></i>
											</div>
											<div *ngIf="tree3.state.opened">
												<!--4级公司信息-->
												<div *ngFor="let tree4 of tree3.childCompanyJSTreeList">
													<div *ngIf='tree4.isShow' style="padding-left: 15px;">
														<div (click)="openCarlist(tree4)" class="companyItem companName">
															<div class="dottedBox"></div>
															<i class="fa fa-home"></i>
															<span class="getSeach">{{tree4.text}}</span>
															<span class="countCar">
															[ <span class="countAll">{{tree4.totalCount}}</span> /
															<span class="countOnline">{{tree4.onLineCount}}</span> /
															<span class="countOffline">{{tree4.offLineCount}}</span> ]
															</span>
															<i class="glyphicon" [ngClass]="{'fa  fa-angle-up':tree4.state.opened}"></i><i class="glyphicon" [ngClass]="{'fa  fa-angle-down':!tree4.state.opened}"></i>
														</div>
														<div *ngIf="tree4.state.opened">

															<!--5级公司信息-->
															<div *ngFor="let tree5 of tree4.childCompanyJSTreeList">
																<div *ngIf='tree5.isShow' style="padding-left: 15px;">
																	<div (click)="openCarlist(tree5)" class="companyItem companName">
																		<div class="dottedBox"></div>
																		<i class="fa fa-home"></i>
																		<span class="getSeach">{{tree5.text}}</span>
																		<span class="countCar">
																		[<span class="countAll">{{tree5.totalCount}}</span>/
																		<span class="countOnline">{{tree5.onLineCount}}</span>/
																		<span class="countOffline">{{tree5.offLineCount}}</span> ]
																		</span>
																		<i class="glyphicon" [ngClass]="{'fa  fa-angle-up':tree5.state.opened}"></i><i class="glyphicon" [ngClass]="{'fa  fa-angle-down':!tree5.state.opened}"></i>
																	</div>
																	<div *ngIf="tree5.state.opened">
																		<!--6级公司信息-->
																		<div *ngFor="let tree6 of tree5.childCompanyJSTreeList">
																			<div *ngIf='tree6.isShow' style="padding-left: 15px;">
																				<div (click)="openCarlist(tree6)" class="companyItem companName">
																					<div class="dottedBox"></div>
																					<i class="fa fa-home"></i>
																					<span class="getSeach">{{tree6.text}}</span>
																					<span class="countCar">
																					[<span class="countAll">{{tree6.totalCount}}</span>/
																					<span class="countOnline">{{tree6.onLineCount}}</span>/
																					<span class="countOffline">{{tree6.offLineCount}}</span> ]
																					</span>
																					<i class="glyphicon" [ngClass]="{'fa  fa-angle-up':tree6.state.opened}"></i><i class="glyphicon" [ngClass]="{'fa  fa-angle-down':!tree6.state.opened}"></i>
																				</div>
																				<div *ngIf="tree6.state.opened">
																					<!--7级公司信息-->
																					<div *ngFor="let tree7 of tree6.childCompanyJSTreeList">
																						<div *ngIf='tree7.isShow' style="padding-left: 15px;">
																							<div (click)="openCarlist(tree7)" class="companyItem companName">
																								<div class="dottedBox"></div>
																								<i class="fa fa-home"></i>
																								<span class="getSeach">{{tree7.text}}</span>
																								<span class="countCar">
																								[<span class="countAll">{{tree7.totalCount}}</span>/
																								<span class="countOnline">{{tree7.onLineCount}}</span>/
																								<span class="countOffline">{{tree7.offLineCount}}</span> ]
																								</span>
																								<i class="glyphicon" [ngClass]="{'fa  fa-angle-up':tree7.state.opened}"></i><i class="glyphicon" [ngClass]="{'fa  fa-angle-down':!tree7.state.opened}"></i>
																							</div>
																							<div *ngIf="tree7.state.opened">
																								<!--8级公司信息-->
																								<div *ngFor="let tree8 of tree7.childCompanyJSTreeList">
																									<div *ngIf='tree8.isShow' style="padding-left: 15px;">
																										<div (click)="openCarlist(tree8)" class="companyItem companName">
																											<div class="dottedBox"></div>
																											<i class="fa fa-home"></i>
																											<span class="getSeach">{{tree8.text}}</span>
																											<span class="countCar">
																											[<span class="countAll">{{tree8.totalCount}}</span>/
																											<span class="countOnline">{{tree8.onLineCount}}</span>/
																											<span class="countOffline">{{tree8.offLineCount}}</span> ]
																											</span>
																											<i class="glyphicon" [ngClass]="{'fa  fa-angle-up':tree8.state.opened}"></i>
																											<i class="glyphicon" [ngClass]="{'fa  fa-angle-down':!tree8.state.opened}"></i>
																										</div>
																										<div *ngIf="tree8.state.opened">
																											<ul *ngFor="let lv9 of tree8.carJSTreeList">
																												<li class="car_num" (click)="slectedCar(tree8,lv9)" [ngClass]="{'onlineCar':lv9.icon==='fa fa-car online'}" *ngIf="lv9.state.opened">
																													<div class="dottedBox"></div>
																													<i class="fa fa-car"></i>
																													<span class="getSeach" [ngClass]="{'slectedCar':lv9.id===slectedCarId}">{{lv9.text}}</span>
																												</li>
																											</ul>
																										</div>
																									</div>
																								</div>
																								<ul *ngFor="let lv8 of tree7.carJSTreeList">
																									<li class="car_num" (click)="slectedCar(tree7,lv8)" [ngClass]="{'onlineCar':lv8.icon==='fa fa-car online'}" *ngIf="lv8.state.opened">
																										<div class="dottedBox"></div>
																										<i class="fa fa-car"></i>
																										<span class="getSeach" [ngClass]="{'slectedCar':lv8.id===slectedCarId}">{{lv8.text}}</span>
																									</li>
																								</ul>
																							</div>
																						</div>
																					</div>
																					<ul *ngFor="let lv7 of tree6.carJSTreeList">
																						<li class="car_num" (click)="slectedCar(tree6,lv7)" [ngClass]="{'onlineCar':lv7.icon==='fa fa-car online'}" *ngIf="lv7.state.opened">
																							<div class="dottedBox"></div>
																							<i class="fa fa-car"></i>
																							<span class="getSeach" [ngClass]="{'slectedCar':lv7.id===slectedCarId}">{{lv7.text}}</span>
																						</li>
																					</ul>
																				</div>
																			</div>
																		</div>
																		<ul *ngFor="let lv6 of tree5.carJSTreeList">
																			<li class="car_num" (click)="slectedCar(tree5,lv6)" [ngClass]="{'onlineCar':lv6.icon==='fa fa-car online'}" *ngIf="lv6.state.opened">
																				<div class="dottedBox"></div>
																				<i class="fa fa-car"></i>
																				<span class="getSeach" [ngClass]="{'slectedCar':lv6.id===slectedCarId}">{{lv6.text}}</span>
																			</li>
																		</ul>
																	</div>
																</div>
															</div>

															<ul *ngFor="let lv5 of tree4.carJSTreeList">
																<li class="car_num" (click)="slectedCar(tree4,lv5)" [ngClass]="{'onlineCar':lv5.icon==='fa fa-car online'}" *ngIf="lv5.state.opened">
																	<div class="dottedBox"></div>
																	<i class="fa fa-car"></i>
																	<span class="getSeach" [ngClass]="{'slectedCar':lv5.id===slectedCarId}">
																	{{lv5.text}}
																</span>
																</li>
															</ul>
														</div>
													</div>
												</div>
												<ul *ngFor="let lv4 of tree3.carJSTreeList">
													<li class="car_num" (click)="slectedCar(tree3,lv4)" [ngClass]="{'onlineCar':lv4.icon==='fa fa-car online'}" *ngIf="lv4.state.opened">
														<div class="dottedBox"></div>
														<i class="fa fa-car"></i>
														<span class="getSeach" [ngClass]="{'slectedCar':lv4.id===slectedCarId}">
															{{lv4.text}}
														</span>
													</li>
												</ul>
											</div>
										</div>
									</div>
									<ul *ngFor="let lv3 of xinxi.carJSTreeList">
										<li class="car_num" (click)="slectedCar(xinxi,lv3)" [ngClass]="{'onlineCar':lv3.icon==='fa fa-car online'}" *ngIf="lv3.state.opened">
											<div class="dottedBox"></div>
											<!--二级公司下的车辆号码-->
											<i class="fa fa-car"></i>
											<span class="getSeach" [ngClass]="{'slectedCar':lv3.id===slectedCarId}">
												{{lv3.text}}
											</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div>
						<ul *ngFor="let neirong of item.carJSTreeList">
							<li [ngClass]="{'onlineCar':neirong.icon==='fa fa-car online'}" *ngIf="neirong.state.opened" class="car_num" (click)="slectedCar(item,neirong)">
								<div class="dottedBox"></div>
								<!--一级公司下的车辆号码-->
								<i class="fa fa-car"></i>
								<span class="getSeach" [ngClass]="{'slectedCar':neirong.id===slectedCarId}">
									{{neirong.text}}
								</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>